<template>
    <div>
        <div id="header-img" @touchstart="showbtn"><img src="../assets/more.png" alt=""></div>
        <div v-show="show">
            <div id="smallhorn"></div>
            <div id="header-menu">
                <router-link to="/" class="item">
                    <div><img src="../assets/1.png" alt="" class="item-pic"></div>
                    <div>首页</div>
                </router-link>
                <router-link to="/sort" class="item">
                    <div><img src="../assets/2.png" alt="" class="item-pic"></div>
                    <div>商品分类</div>
                </router-link>
                <router-link to="/goods/car" class="item">
                    <div><img src="../assets/3.png" alt="" class="item-pic"></div>
                    <div>购物车</div>
                </router-link>
                <div class="item">
                    <div><img src="../assets/4.png" alt="" class="item-pic"></div>
                    <div>会员中心</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data: function() {
        return {
            show:false
        }
    },
    mounted() {
        // this.http.get("/api/more")
        //     .then(res => {
        //         console.dir(res.data.list);
                
        //         // this.pic = res.data.list;
        //         console.log(this.pic[0].img);
        //         this.b = this.pic[3].img;
        //         this.c = this.pic[2].img;
        //         this.d = this.pic[1].img;
        //         this.e = this.pic[4].img;
        //     })
    },
    methods: {
        showbtn(){
            this.show = !this.show;
        }
    }
}
</script>

<style scoped>
a{
    text-decoration: none;
}
#header-img {
    position: absolute;
    right: 15px;
    top: 10px;
}

#header-img img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

#header-menu {
    height: 190px;
    width: 130px;
    position: absolute;
    right: 8px;
    top: 50px;
    background-color: #484F55;
    /*border: solid 1px black;*/
    z-index: 100;
}

.item {
    height: 47px;
    width: 130px;
    border-bottom: #484F55;
    border-radius: 2px;
    line-height: 47px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    display: flex;
    border-bottom: 1px solid #5B6166;
}

#smallhorn {
    height: 15px;
    width: 15px;
    position: absolute;
    right: 20px;
    top: 43px;
    transform: rotate(-45deg);
    background-color: #484F55;
}

.item-pic {
    height: 25px;
    margin: 0 10px;
    margin-top: 8px;
}
</style>